<template>
  <div class="login-cmpt__input-line">
    <img class="input-line__icon" :src="icon" alt="图标" />
    <span class="input-line__v-line"></span>
    <input class="input-line__input" type="text" v-model="v" :placeholder="placeholder" />
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'

export default defineComponent({
  props: {
    icon: {
      type: String,
    },
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    }
  },
  setup(props, ctx) {
    const v = computed({
      get() {
        return props.value
      },
      set(v) {
        ctx.emit('update:value', v);
      }
    });

    return {
      v
    }
  },
})
</script>


<style lang="stylus">
@import '../../../styles/mixin.styl';

.login-cmpt__input-line
  Flex(row, flex-start, center)
  padding .06rem
  margin-bottom 1.5em
  height .64rem
  border-bottom: 1px solid #C1C7D0;
  background transparent
  .input-line__icon
    width .54rem
    height @width
  .input-line__v-line
    display block
    height 100%
    width 1px
    margin 0 .1rem
    background #C1C7D0
  .input-line__input
    flex 1
    display block
    height 100%
    padding 0 .3rem 
    font-size .28rem
    border none
    outline none
    &::-webkit-input-placeholder
      color #AAAAAA

    
</style>